<template>
  <div id="menu" ref="menu">
    <div class="sys-box">
      <el-select v-model="sysValue" placeholder="请选择" @change="sysChange">
        <el-option
          v-for="item in sysInfos"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input placeholder="输入关键字进行过滤" v-model="filterText">
      </el-input>
      <div class="button">
        <el-button type="primary" icon="el-icon-plus" @click="addMenu('-1')"
          >新增</el-button
        >
      </div>
      <el-tree
        ref="tree"
        class="filter-tree"
        default-expand-all
        node-key="routeName"
        :data="menuLists"
        :props="defaultProps"
        :filter-node-method="filterNode"
        :highlight-current="true"
        :expand-on-click-node="false"
        :indent="24"
      >
        <span
          class="custom-tree-node"
          slot-scope="{ node, data }"
          @click="handleTree(node, data)"
        >
          <span
            ><i class="iconfont" :class="data.menuIcon"></i>&nbsp;&nbsp;{{
              data.menuName
            }}</span
          >
          <span class="handle-icon">
            <i
              v-show="data.menuType == 1"
              class="el-icon-plus"
              title="新增"
              @click.stop="addMenu(data._id)"
            ></i>
            <i
              class="el-icon-edit"
              title="编辑"
              @click.stop="editMenu(data)"
            ></i>
            <i
              class="el-icon-delete"
              title="删除"
              @click.stop="delMenu(data)"
            ></i>
          </span>
        </span>
      </el-tree>
    </div>
    <div class="content-box">
      <div class="content-item menu-item">
        <div class="title">
          <span class="title-name">菜单信息</span>
        </div>
        <div class="content-detail">
          <EditOrDetail
            ref="detailInfo"
            v-model="detailInfo"
            :dataJ="detailJ"
          />
        </div>
      </div>
      <div class="content-item btn-item" v-if="detailInfo.menuType == 2">
        <div class="title">
          <span class="title-name">按钮信息</span>
        </div>
        <div class="btn-box">
          <el-button type="primary" icon="el-icon-plus" @click="addAuth"
            >新增</el-button
          >
        </div>
        <div class="table-box">
          <BkTable
            :tableHead="tableJ"
            :tableData="tableData"
            :config="{
              showPage: false,
            }"
          />
        </div>
      </div>
    </div>
    <!-- 菜单新增 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="800px"
      :center="true"
      :before-close="dialogClosed"
      class="el-form-item_line"
    >
      <div slot="title" class="dialog-title">
        <span>{{ dialogTitle }}</span>
      </div>
      <el-form
        :inline="true"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        :validate-on-rule-change="false"
        label-width="100px"
      >
        <el-form-item label="菜单名称" prop="menuName">
          <el-input
            v-model="ruleForm.menuName"
            size="small"
            placeholder="请输入菜单中文名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜单序号" prop="menuSort">
          <el-input
            v-model="ruleForm.menuSort"
            size="small"
            placeholder="请输入菜单序号"
            @keyup.native="$limitInt(ruleForm, 'menuSort')"
            @blur="$limitInt(ruleForm, 'menuSort')"
          ></el-input>
        </el-form-item>
        <el-form-item label="路由名称" prop="routeName">
          <el-input
            v-model="ruleForm.routeName"
            size="small"
            placeholder="请输入路由名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="路由路径" prop="routePath">
          <el-input
            v-model="ruleForm.routePath"
            size="small"
            placeholder="请输入路由路径"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜单图标" prop="menuIcon">
          <el-input
            v-model="ruleForm.menuIcon"
            size="small"
            placeholder="请输入菜单图标"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否隐藏" prop="menuState">
          <el-select v-model="ruleForm.menuState" size="small">
            <el-option
              v-for="option in menuHiddenList"
              :label="option.label"
              :value="option.value"
              :key="option.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单类型" prop="menuType">
          <el-radio-group v-model="ruleForm.menuType" :disabled="dialogType">
            <el-radio
              v-for="option in menuTypeList"
              :key="option.value"
              :label="option.value"
              >{{ option.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogClosed" type="info" plain
          >取消</el-button
        >
        <el-button
          size="small"
          @click="submitForm('ruleForm')"
          type="primary"
          plain
          >保存</el-button
        >
      </span>
    </el-dialog>
    <!-- 按钮权限新增 -->
    <el-dialog
      :visible.sync="authDialogVisible"
      width="800px"
      title="按钮权限新增"
      :center="true"
      :before-close="authClosed"
    >
      <el-form
        ref="authForm"
        :model="authForm"
        :rules="authRules"
        label-width="100px"
      >
        <el-form-item label="权限名称" prop="authName">
          <el-input
            v-model="authForm.authName"
            size="small"
            placeholder="请输入权限名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="权限值" prop="authValue">
          <el-input
            v-model="authForm.authValue"
            size="small"
            placeholder="请输入权限值"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="authClosed" type="info" plain
          >取消</el-button
        >
        <el-button
          size="small"
          @click="submitAuth('authForm')"
          type="primary"
          plain
          >保存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getMenuLists,
  saveMenu,
  deleteMenu,
  saveAuth,
  updateMenu,
  getAuthLists,
} from "@/api/login";

export default {
  components: {},
  data() {
    return {
      dialogVisible: false,
      dialogType: false,
      dialogTitle: "",
      ruleForm: {
        menuName: "",
        menuSort: "",
        routeName: "",
        routePath: "",
        menuIcon: "",
        menuState: 0,
        menuType: "1",
        id: "",
      },
      detailInfo: {},
      filterText: "",
      sysValue: "1",
      menuLists: [],
      parentMenu: "",
      defaultProps: {
        children: "children",
        label: "description",
      },
      menuHiddenList: [
        {
          label: "是",
          value: 1,
        },
        {
          label: "否",
          value: 0,
        },
      ],
      menuTypeList: [
        {
          label: "目录",
          value: "1",
        },
        {
          label: "页面",
          value: "2",
        },
      ],
      tableData: [],
      parentId: "-1",
      authDialogVisible: false,
      authForm: {
        authName: "",
        authValue: "",
      },
      authRules: {},
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  computed: {
    rules() {
      return {
        menuName: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
        ],
        menuSort: [
          { required: true, message: "请输入菜单序号", trigger: "blur" },
        ],
        routeName: [
          { required: true, message: "请输入路由名称", trigger: "blur" },
        ],
        routePath: [
          {
            required: this.ruleForm.menuType == 2,
            message: "请输入文件路径",
            trigger: "blur",
          },
        ],
        menuState: [
          { required: true, message: "请选择是否隐藏", trigger: "change" },
        ],
        menuType: [
          { required: true, message: "请选择菜单类型", trigger: "change" },
        ],
      };
    },
    sysInfos() {
      return [
        {
          name: "后台管理系统",
          value: "1",
          code: "backManageSystem",
        },
        {
          name: "科研数据中心",
          value: "2",
          code: "scientificDataCenter",
        },
        {
          name: "科研大数据平台",
          value: "3",
          code: "scientificDataPlatform",
        },
        {
          name: "临床科研数据管理系统",
          value: "4",
          code: "clinicalManageSystem",
        },
      ];
    },
    detailJ() {
      return [
        {
          prop: "menuName",
          label: "菜单名字",
          type: "input",
          width: "100%",
          disabled: true,
        },
        {
          prop: "routeName",
          label: "路由名称",
          type: "input",
          width: "100%",
          disabled: true,
        },
        {
          prop: "routePath",
          label: "文件路径",
          type: "input",
          width: "100%",
          disabled: true,
        },
        // {
        //   prop: "routerName",
        //   label: "路由地址",
        //   type: "text",
        //   width: "100%",
        //   disabled: true,
        //   formatter: (prop) => {
        //     if (this.parentMenu) {
        //       return `${this.parentMenu}/${this.detailInfo.menuName}`;
        //     } else {
        //       return `/${this.detailInfo.menuName}`;
        //     }
        //   },
        // },
        // {
        //   prop: "sort",
        //   label: "菜单序号",
        //   type: "text",
        //   width: "100%",
        //   disabled: true,
        // },
        {
          prop: "menuIcon",
          label: "菜单图标",
          type: "text",
          width: "100%",
          disabled: true,
          hidden: !this.detailInfo.menuIcon,
        },
        {
          prop: "menuState",
          label: "是否隐藏",
          type: "text",
          width: "100%",
          disabled: true,
          formatter: (prop) => {
            return this.detailInfo[prop] == 1 ? "是" : "否";
          },
        },
      ];
    },
    tableJ() {
      return [
        {
          prop: "authName",
          label: "权限名字",
        },
        {
          prop: "authValue",
          label: "权限值",
        },
        {
          label: "操作",
          width: "100px",
          align: "center",
          btnList: [
            {
              name: "编辑",
              type: "text",
              handleClick: (val) => {},
            },
            {
              name: "删除",
              type: "text",
              handleClick: (val) => {},
            },
          ],
        },
      ];
    },
  },
  created() {},
  mounted() {
    this.getMenus();
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.menuName.indexOf(value) !== -1;
    },
    handleTree(node, data) {
      // 菜单信息
      this.detailInfo = data;
      // 按钮信息
      this.tableData = [];
      this.getAuthList();
    },
    addAuth() {
      this.authDialogVisible = true;
    },
    async submitAuth() {
      await saveAuth({
        ...this.authForm,
        clientId: this.sysValue,
        menuId: this.detailInfo._id,
      });
      this.authClosed();
      this.$message({
        type: "success",
        message: "新增成功",
      });
      this.getAuthList();
    },
    authClosed() {
      this.$refs.authForm.resetFields();
      this.authDialogVisible = false;
    },
    async getAuthList() {
      let res = await getAuthLists({
        clientId: this.sysValue,
        menuId: this.detailInfo._id,
      });
      console.log(res);
      this.tableData = res;
    },
    async getMenus() {
      let res = await getMenuLists({ clientId: this.sysValue });
      this.menuLists = res.menuList;
    },
    sysChange() {
      this.getMenus();
      this.detailInfo = {};
      this.tableData = [];
    },
    addMenu(parentId) {
      this.dialogType = false;
      this.dialogTitle = "新增菜单";
      this.parentId = parentId;
      if (this.parentId == -1) {
        this.ruleForm.menuType = "1";
      } else {
        this.ruleForm.menuType = "2";
      }
      this.dialogVisible = true;
    },
    editMenu(row) {
      this.ruleForm = this.$options.data().ruleForm;
      this.dialogType = true;
      this.dialogTitle = "编辑菜单";
      this.dialogVisible = true;
      for (let o in this.ruleForm) {
        this.ruleForm[o] = row[o];
      }
      this.ruleForm.id = row._id;
      this.parentId = row.parentId;
    },
    async delMenu(row) {
      await deleteMenu({ id: row._id });
      this.$message({
        type: "success",
        message: "删除成功",
      });
      this.getMenus();
    },
    dialogClosed() {
      this.ruleForm = this.$options.data().ruleForm;
      this.dialogVisible = false;
    },
    submitForm() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.ruleForm.id) {
            updateMenu({
              ...this.ruleForm,
              clientId: this.sysValue,
              parentId: this.parentId,
            });
            this.$message({
              type: "success",
              message: "更新成功",
            });
          } else {
            await saveMenu({
              ...this.ruleForm,
              clientId: this.sysValue,
              parentId: this.parentId,
            });
            this.$message({
              type: "success",
              message: "新增成功",
            });
          }

          this.dialogClosed();
          this.getMenus();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
#menu {
  display: flex;
  padding: 16px 20px;
  // padding-bottom: 0;
  .sys-box {
    width: 250px;
    margin-right: 20px;
    border-right: 1px solid #efefef;
    padding-right: 12px;
    .el-select {
      width: 100%;
      margin-bottom: 15px;
    }
    .el-input {
      width: 100%;
      margin-bottom: 15px;
    }
    .button {
      width: 100%;
      border-bottom: 1px solid #efefef;
      padding-bottom: 15px;
      margin-bottom: 15px;
    }
    .el-tree {
      .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
        .handle-icon {
          display: none;
        }
        &:hover {
          .handle-icon {
            display: inline-block;
          }
        }
        .el-icon-edit {
          font-size: 16px;
          margin-right: 8px;
        }
        .el-icon-plus {
          font-size: 16px;
          margin-right: 8px;
        }
        .el-icon-delete {
          font-size: 16px;
        }
      }
    }
  }
  .content-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .content-item {
      display: flex;
      flex-direction: column;
      .title {
        position: relative;
        background-color: #fff;
        margin-bottom: 15px;
        .title-name {
          display: inline-block;
          background-color: #fff;
          position: relative;
          z-index: 1;
          margin-left: 20px;
          padding: 0 10px;
        }
        &::after {
          content: "";
          display: block;
          width: 100%;
          height: 1px;
          background-color: #ccc;
          position: absolute;
          top: 50%;
          left: 0;
          // transform: translate(-50%, 0);
        }
      }
      .content-detail {
        flex: 1;
      }
    }
    // .menu-item {
      // flex: 1;
    // }
    .btn-item {
      flex: 1;
      display: flex;
      .btn-box {
        margin-bottom: 10px;
      }
      .table-box {
        flex: 1;
      }
    }
  }
}
</style>
